<template>
    <section class="center-detail">
        <swiper :list="centerPics" auto height="200px"></swiper>
        <divider>
            <div style="font-size:18px;">{{center.name}}</div>
        </divider>
        <group>
            <cell title="场馆地址:">{{center.address}}</cell>
            <cell title="营业时间:">{{center.openTime}}</cell>
            <cell title="场馆电话:">{{center.phone}}</cell>
            <cell title="场馆介绍:" class="cell-autowrap">
                <p>{{center.description}}</p>
            </cell>
        </group>
        <court-detail :courts="center.courts" :select-type="1"></court-detail>
    </section>
</template>
<script>
import courtDetailComponent from '../../components/courtDetailComponent.vue';
import centerAction from '../../vuex/actions/centerAction';
import centerGetter from '../../vuex/getters/centerGetter';

import Swiper from 'vuxComponents/swiper';
import SwiperItem from 'vuxComponents/swiper-item';
import Divider from 'vuxComponents/divider';
import Group from 'vuxComponents/group';
import Cell from 'vuxComponents/cell';

export default {
    components: {
        'court-detail': courtDetailComponent,
        Swiper,
        SwiperItem,
        Divider,
        Group,
        Cell
    },
    props: {
        centerId: Number
    },
    created() {
        var centerId = this.$route.params.centerid;
        this.getCenterDetail(centerId);
    },
    computed: {
        centerPics() {
            var centerPics = [];
            if (this.center && this.center.pic) {
                centerPics = this.center.pic.map((pic, index) => ({
                    img: pic,
                    url: 'javascript:'
                }));
            }
            return centerPics;
        }
    },
    vuex: {
        getters: {
            center: centerGetter.getCenter,
        },
        actions: {
            getCenterDetail: centerAction.getCenterDetail
        }
    }
}
</script>
<style lang="sass" scoped>
@import '../../../sass/mixin/setOnepx.scss';
</style>
